web6047 2021年 8月 web6047 2021年 8月

プログラミングやRPG（作るほう）が好きな人の日記

このウェブページは毎日 夜11時にアクセスできなくなります。 朝6時半に再開されます。（世の中のネット依存対策として） 例外でアクセスができる場合があります。上のメニューの「aboutThisWebsite」を参照してください。 URL は https でもアクセスできます。 黒猫画像はクリック（タッチ）すると消えます。 NO PC WEEK とは私自身の健康のために私のパソコンの使用を制限する期間です。

最近観ているアニメ：

日付 （上ほど新しい）	タイトル	無料配信 （各話配信日）	公評価	私評価
2021/7/25～視聴中	機動戦士ガンダムSEED HDリマスター（リンクは Yahoo GYAO で検索） ロボットアニメ／2002年TBS系列／各話25分程度 ファーストガンダムを彷彿とさせる物語展開＋エヴァンゲリオンという感じの内容。	月火水木金土日	★★★☆☆ 3.6	★★★☆☆ 3.8
2021/7/15～視聴中	ドラゴンボール（リンクは Yahoo GYAO で検索） 冒険・格闘技／1984年週刊少年ジャンプ／各話25分程度	月・水・金・・	★★★★☆ 4.8	★★★★☆ 4.5
2021/5/18～視聴中	はじめの一歩（リンクは Yahoo GYAO で検索） ボクシング／1989年週刊少年マガジン／各話25分程度 大人になってわかる、ドラゴンボールを上回る面白さ。スケベ表現がたまにあるので男性向け？	月・水・・土・	★★★★☆ 4.5	★★★★★ 5

※黄色塗りは公私ともに評価４以上

最近観た映画：

日付 （上ほど新しい）	タイトル	無料配信 （日付まで）	公評価	私評価
2021/8/6	ターミネーター4　【吹替版】（リンクは Yahoo GYAO で検索） SFアクション／2009年アメリカ／01:54:49／（シュワいない）	2021年8月7日(土) 23:59	★★★☆☆ 3.8	★★★☆☆ 3.2
2021/7/30	インストール（リンクは Yahoo GYAO で検索） ドラマPG12／2004年日本／01:34:31／上戸彩 上戸彩が本当の女子高生みたいに見えたから★４（でも当時二十歳くらいだからそう見えて当然か？？）	2021年8月10日(火) 23:59	★★☆☆☆ 2.2	★★★★☆ 4
2021/7/15	ラスト・ターゲット（リンクは Yahoo GYAO で検索） サスペンス／2010年アメリカ／01:44:47／ジョージ・クルーニー 観る人を選ぶ物静かな映画。	2021年8月7日(土) 23:59	★★★☆☆ 3.7	★★★★☆ 4

※表の掲載の意図：共感を得るため

最近買ったもの：

日付 （上ほど新しい）	タイトル	公評価	私評価
2021/8/7	曲：アンインストール（リンクは Apple Music の当該ページへ） 2007年の「ぼくらの」というロボットアニメの主題歌 歌詞を読みましたが、「突然現れた新しい現実に対し、受け入れ、やるっきゃない」と言っているのかなぁ…	★★★★★ 5	★★★★☆ 4
2021/7/9	ゲーム：ザ・トリロジーズ -T&E SOFT / XTAL SOFT COLLECTION-（リンクは EGG の当該ページへ） PCレトロゲームのセット。RPG開発の研究のために予約で購入。発売日は未定だそうです。	発売前	発売前
2021/5/29	曲：最強○×計画（リンクは Apple Music の当該ページへ） 2006年の「すもももももも　地上最強のヨメ」というアニメの主題歌	★★★★☆ 4.5	★★★★☆ 4
2021/5/15	プラモ：MG スーパーガンダム（ver1.0）（リンクは Amazon 同商品ページへ） 1998年発売のガンプラです。街の小さなおもちゃ屋さんで売れ残っていたのを買いました。	★★★★☆ 4.1	作り途中です

日記：

2021/8/29（日）

RPG のエフェクト

私が最近進めている「全体的・基本・簡潔のRPG」のプログラムのための、「エフェクト」についての試作プログラムです。

一部のエフェクトは「フラッシュ」するので、いわゆる「ポケモンショック（光過敏性発作）」のおそれがあります。
実行する前にアラートを出しますので「危ないんじゃないか」と思う人はアラートの「キャンセル」を押して回避してください。

▼エフェクト「雨」

▼エフェクト「回転」＋「拡大縮小」

見て遊びたい方のための説明

ここをクリックすると新しいウィンドウを開いて JavaScript を実行します。

キーボードが必要です。タッチデバイスには対応していません。

↑ ↓ ← →  で画面中央の青い○を動かし、赤い□が描かれた部分に乗ると、エフェクトが発動します。

用意しているエフェクトは、「拡大縮小」、「雨」、「回転」、「振動」、「フラッシュ」、「フェードアウト」の6点です。

複数のエフェクトを組み合わせて同時に動かすこともできます。雨を降らせながら画面を振動させればムード満点です。

（一番下の赤い□で雨を降らせた後、一番上の赤い□に乗る）

プログラムを理解したい方のための説明

ここをクリックすると新しいウィンドウを開いてプログラムリストを表示します。

この試作プログラムは .html ファイル単体で動作しています。

プログラム中の remaining（リメイニング）という英単語は「残り」という意味です。

プログラム中の story という単語は、RPG の開発でよく使われる「イベントスクリプト」のことです。

プログラムを理解したい方のための説明（1/6） - JavaScript の構文について

JavaScript を使用しています。以下について理解していないと難しい内容となっています。（以下5項目）

1. JavaScript のオブジェクト指向を利用しています。（class や extends といったキーワードを使用しています）
   JavaScript で Hello World! プログラムを作るときはだいたい以下のようになりますが、
   <SCRIPT>
alert( "Hello World !" );
</SCRIPT>これを、オブジェクト指向（class）を使って書くと以下のようになります。
   <SCRIPT>
class Test {
    constructor() {
        alert( "Hello World !" );
    }
}
test = new Test();
</SCRIPT>上の書き方で慣れている人にとっては、下の書き方は「面倒な書き方」に見えたり、「上の書き方で満足しているのでわざわざ下の書き方に変更する必要はない」と感じるのではと思います。
   多くのプログラマーたちが class を書いているときに期待することは、
   
   ・プログラム全体が半自動的に（いつのまにか）整頓されること
   ・整頓されるので、拡張性が高まる
   ・オブジェクト指向の extends（継承）が利用できること。それが結構期待した通りに動いてくれるので楽しい。
   ・（JavaScript においては）１つのページで2つ以上のスクリプトを同居させたいときに、クラスを使えば、変数名の競合や関数名の競合を避けられる。
   だいたいこんな感じではないかと思いますが、仕事でオブジェクト指向を使っている人からすれば、上記の他にもっと違う「期待」があるかもしれません。
   class を使ったプログラミングがあまりに便利で、プログラミングしていて気持ちが良いので、みなさん class を書いているときには上記のように何かしら期待をともないながら書いていると思います。
   ”その物体のために用意された関数、その物体のために用意された変数”、、、class を書くことは、どこかロボットを作るような感覚に似ています。私が初めてオブジェクト指向を導入した当初は「ロボットを作っているみたいだ」と思ったものです。
2. JavaScript の Promise, async, await を使用しています。（これが一番難しいと思う）
   async function story() {
    alert( "Hello" );
    await new Promise( function( sigotoOk ) {
        setTimeout( sigotoOk, 3000 );
    } );
    alert( "World !" );
}・await を使うことで、その関数をその場所で一時停止できます。
   ・await 文が含まれる関数（上記 story() 関数）には async を付けないとエラーになります。
   ・Promise の引数に設定した関数はとりあえずすぐに実行されます。
   ・そのなかで、sigotoOk() をあるタイミングで実行するようにすれば、一時停止を解除できます。
   （上のプログラムでは最初に Hello と表示された後、3秒後に World ! と表示されます。コピペして story() を呼び出してもらえば動きを確認できます）
   
   これによって、エフェクトが終わるまで待ち、続いて別のエフェクトを実行するとか、キーが押されるまで待ち、押された後にエフェクトを入れるとかそういう動作を１つの関数の中で実行できるようになります。それがつまり、JavaScript の関数をゲームのイベントスクリプトとして使えるようになる、ということです。
   
   上記のプログラムの await 以降を下記のように別の関数に分けることも多いです。下記プログラムは上記プログラムと同じ動きをします。
   async function story() {
    alert( "hello" );
    await effect1();
    alert( "world !" );
}
function effect1() {
    return new Promise( function( sigotoOk ) {
        setTimeout( sigotoOk, 3000 );
    } );
}Promise, async, await は結構奥が深くてすべてを理解するのは難しいですが、このエフェクト試作品プログラムを理解するだけなら これだけ知っておいてもらえれば大丈夫です。
3. bind() メソッドを使用しています。
   「その関数（メソッド）内の this は何なのか」を指定するメソッドです。
   そのままだと this が window（だったか undefined だったか）になる場合が多いので多用しています。
   たとえば、setTimeout() とか、onkeydown() などのハンドラ関数や、Promise()で指定する関数は、this が Window になってしまうので、bind() を使う必要があります。「bind」は英単語で「むすびつける」という意味だそうです。バインドと読みます。
   class Test {
    constructor() {
        setTimeout( function() {
            alert( this.constructor.name );    //'Window'
        }, 1000 );

        setTimeout( function() {
            alert( this.constructor.name );    //'Test'
        }.bind( this ), 2000 );
    }
}
   
4. アニメーションのために、requestAnimationFrame() を使用しています。
   setTimeout() は以下のように手軽に使えるのに対し、、
   function test() {
    console.log( "Hello World !" );
    setTimeout( test, 1000 );
}
test();requestAnimationFrame() で同じことをやろうとすると、以下のように自分で時間間隔（経過時間）を調べる必要があります。
   beforeTime = 0;
function test( timestamp ) {
    if( timestamp - beforeTime >= 1000 ) {
        console.log( "Hello World !" );
        beforeTime = timestamp;
    }
    requestAnimationFrame( test );
}
test();requestAnimationFrame() を使うメリットはそれがアニメーションのために用意された関数であって、見た目の動きがスムーズに感じられます。まるでファミコンみたいに安定感のある動きになります。
   それに対し、setTimeout() や setInterval() はアニメーションのための調整がされていないので動きがぎこちなくなり、ファミコンみたいなきれいな動きになりません。
   一度 requestAnimationFrame() に慣れてその良さを実感してしまうと、setTimeout() や setInterval() には戻れなくなります。
5. CANVAS の save/restore()、translate()、rotate() 等を使用しています。
   translate( x, y ) とすれば、描画の原点をその位置へ移動できます。
   その事前に save() を行い、事後にrestore() すれば、原点は元に戻ります。
   function draw( cc ) {    //ccは「CANVASコンテキスト」
    cc.save();
        cc.translate( 100, 100 );    //描画の原点をその位置へ移動できます。
        cc.rotate( 3.14 / 4 );       //以後原点を中心に45度回転して描画
        cc.fillStyle = "lightblue";
        cc.fillRect( 0, 0, 150, 100 );
    cc.restore();    //原点は元に戻ります。（回転も戻ります）

    cc.fillStyle = "red";    //原点を示す
    cc.fillRect( 100, 100, 8, 8 );
}save() と restore() をやらないと、たとえば描画のたびに translate( 10, 10 ) を繰り返した際、2回目の描画で 20, 20 が原点、3回目の描画で 30, 30 が原点になってしまいます。以後どんどん原点が右下へ移動していきます。そのような使い方は通常はやらないので、基本的に translate() や rotate() 等、画面をいじるメソッドを行う前後には save(), restore() を入れるようにします。

以上の5項目が、この試作プログラムを理解するための前提条件となっています。

プログラムを理解したい方のための説明（2/6） - 個人的な手法

そのほか、個人的な手法として以下のようなしくみを導入しています。

• metronome
  音楽で使用する、リズムを刻むあの物体「メトロノーム」が名前の由来です。
  キャラの足踏みなど、アニメーションをする際に、この metronome を参照することで、パラパラアニメのタイミングを知ることができます。任意のスピードの metronome を複数用意することができるので、結構自由がききます。足踏みは1秒ごとに、地上の木の揺れは2秒ごとに、といった具合に。
  下記はメトロノームを使用しない「通常版」のプログラムと、「メトロノーム版」のプログラムです。どちらもまったく同じ動きをしますが、もし、同じタイミングでアニメするキャラが100体あったとして、通常版はタイミングの計算は100回行うことになりますが、メトロノームのほうはタイミングの計算は1回だけです。そして、メトロノームはキャラごとのタイミングの参照がシンプルになっています。
  
  
  新しいウィンドウで JavaScript を実行
  function onloadx() {
    //キャラの設定を行い、setIntervalを呼び出すだけのプログラムです。
    sprites = {
        jiki : {
            images : [ "▲", "△" ],
            timing : 1000,    //jikiのタイミングは他と異なるが、
            nowTime : 0,
            x : 100, y : 200,
        },
        pow : {
            images : [ "★", "☆" ],
            timing : 100,    //powとtekiはタイミングが同じ
            nowTime : 0,
            x : 150, y : 150,
        },
        teki : {
            images : [ "－", "■" ],
            timing : 100,    //powとtekiはタイミングが同じ
            nowTime : 0,
            x : 100, y : 100,
        },
    };
    setInterval( function() {
        let cc = document.getElementById( "test" ).getContext( "2d" );
            cc.font = "32px''";
        cc.clearRect( 0, 0, cc.canvas.width, cc.canvas.height );
        for( let name in sprites ) {
            let sprite = sprites[ name ];
                sprite.nowTime += 100;                //キャラごとに管理＆処理
            if( sprite.nowTime >= sprite.timing ) {    //キャラごとに管理＆処理
                sprite.nowTime = 0;                    //キャラごとに管理＆処理
                sprite.images = sprite.images.reverse();
            }
            cc.fillText( sprite.images[ 0 ], sprite.x, sprite.y );
        }
    }, 100 );
}

  新しいウィンドウで JavaScript を実行
  function onloadx() {
    //メトロノームとキャラの設定を行い、setIntervalを呼び出すだけのプログラムです。
    metronomes = [
        {
            timing : 1000,        //jikiその他が使うメトロノーム
            nowTime : 0,
            changed : false,
        },
        {
            timing : 100,        //pow,tekiその他が使うメトロノーム
            nowTime : 0,
            changed : false,
        },
    ];
    sprites = {
        jiki : {
            images : [ "▲", "△" ],
            metronome : metronomes[ 0 ],    //そのメトロノームを指定
            x : 100, y : 200,
        },
        pow : {
            images : [ "★", "☆" ],
            metronome : metronomes[ 1 ],    //そのメトロノームを指定
            x : 150, y : 150,
        },
        teki : {
            images : [ "－", "■" ],
            metronome : metronomes[ 1 ],    //そのメトロノームを指定（powと共通）
            x : 100, y : 100,
        },
    };
    setInterval( function() {
        //メトロノーム更新
        for( let metronome of metronomes ) {
            metronome.nowTime += 100;
            if( metronome.nowTime >= metronome.timing ) {
                metronome.nowTime = 0;
                metronome.changed = true;
            } else {
                metronome.changed = false;
            }
        }
   
        let cc = document.getElementById( "test" ).getContext( "2d" );
            cc.font = "32px''";
        cc.clearRect( 0, 0, cc.canvas.width, cc.canvas.height );
        for( let name in sprites ) {
            let sprite = sprites[ name ];
            if( sprite.metronome.changed ) {    //メトロノームがタイミングをシンプルに教えてくれる
                sprite.images = sprite.images.reverse();
            }
            cc.fillText( sprite.images[ 0 ], sprite.x, sprite.y );
        }
    }, 100 );
}
  
  余談ですが、電子回路では「異なる周波数の複数の信号を使う」という場面が多々あり、それがこういう発想につながったんだと思います。私が電気を学び始めた当初、家族から「ソフトウェアにハードウェア的なアプローチを用いて、新しいことを始められるんじゃないか」と言われたことがあり、それがこういう形で実ったのでは、と思います。

プログラムを理解したい方のための説明（3/6） - 関数名、変数名で遊んでいる

それから、プログラム中に afterEffects という名前の配列が出てきますが、Adobe の「After Effects」というソフトウェアの名前を持ってきて遊んでいます。関数名に tai(), aji(), saba() といった命名をするのは情報系の学生でもやっていることなので、恥ずかしがらずに思い思いにやると良いでしょう。私が最近やったのは、

• missionCompleted()　…　映画の mission:impossible で核弾頭を無効化する信号を端末から送る際にイーサンハントが叫んだ言葉。これを Promise の resolve() の名前にした。（上記プログラムの sigotoOK()のこと）
• sayOkToPromise()　…　iMacが世に初めて登場したときのキャッチフレーズ say hello to iMac。上記同様 Promise の resolve() の名前にした。
• masterOfMonsters　…　同名のゲームソフト。RPG のプログラムでモンスターに遭遇した際、そのモンスターを統制するリーダー格のモンスターを他のモンスターと分けるため。
• copyObjectKai　…　ドラゴンボール改。copyObjectという関数の改良版。
• keyMaker　…　映画の マトリクス に出てくるキーメーカー。オブジェクトの配列を連想配列に変換する際そのキーをオブジェクトから生成する関数の名前に使った。
• theEndOfThe～　…　The End Of The Evangerion から。

プログラムを理解したい方のための説明（4/6） - 汎用的な書き方をしている

このエフェクト試作は汎用的にプログラムしているので、マップ全体に限らず、キャラクター1体単位など、「描画個体」に対して効果が出るようになっています。たとえば「振動」エフェクトは、マップ全体に対して行えば「地震」に見えるし、キャラクター1体に対して行えば「身震い」しているように見えます。

this.effectz.quake( this, 2, 50, nowMs + 4000 );    //マップ全体に対して

this.effectz.quake( this.player, 2, 50, Date.now() + 800 );    //キャラクター1体に対して

赤い部分を変えることでエフェクト対象が変わります。

プログラムを理解したい方のための説明（5/6） - エフェクトの処理が、afterEffects と beforeEffects の二手に分かれている

afterEffects と beforeEffects の二手に分かれているのは、エフェクトの内容が「描画前に実行したい命令」と「描画後に実行したい命令」とで分かれているためです。

たとえば、「振動」エフェクトは画面全体をゆらしますがこれは描画位置を小刻みに左右に変更して実現しています。これは描画の前提条件を変えるもの（ translate() ）なので beforeEffects に入れます。「雨」エフェクトは描画後に上から雨粒を描きたいので afterEffects に入れます。

プログラムを理解したい方のための説明（6/6） - エフェクト同士の時間的なズレを防止

複数のエフェクトを組み合わせて同時に動かす際、「あるエフェクトを何秒間」と計画通りにプログラムが動いてくれないと「同時に終わるはずなのに、あるエフェクトが少し遅れて終了する」という結果になってしまいます。計画通りに動かすために、エフェクトの終了判定に Date.now() という現在時刻のメソッドを使っています。

現在時刻　>=　エフェクトの終了時刻

この条件が成立したらエフェクトが終了する。というプログラムになっています。（quake, flash）

地震（quake）やフラッシュ（flash）はガタガタガタ、シパシパシパと一定時間繰り返せばよく、終わりの状態は特に決まっていないので、この方法でいいのですが、回転や拡大縮小、フェードアウトは、終了時には、回転は360度まで回転していなければならないし、拡大縮小は指定の拡大率になっていなければならないし、フェードアウトはちゃんと真っ暗で終わらなければなりません。上記の時間の条件で終わらせようとすると回転の途中で終わる、という結果になってしまいます。実際にそうなって悩みました。

その解決として、アニメのパラパラの1回において、その1回で動かす量を、「（終わりの状態までの）残りの動作量を残りの描画回数（パラパラ回数）で割る。それをstep（その回の動作量）とする」という計算で決めています。（zoom, rotate, fadeout）

そうすることで、指定時間に合わせるためにどれくらい動かす というのを毎回計算しなおすので、毎回時間的なずれが修正されて、ピタッと指定時間に終了できます。

※エフェクトは3秒間で終わらせる等、実行時間を決められるので、その間に描画が何回行われるか（描画回数）は計算できます。

このおかげで、複数のエフェクトを組み合わせて動かすことができ、表現力豊かなエフェクトになるわけですが、その代わり難しい内容となってしまいました。

コメント

「全体的・基本・簡潔のRPG」のプログラムを目指していますが、この試作プログラムはまだまだ難しいところだと思います。

quake や rotate など複数あるエフェクト関数を、単なる関数の配列にするのか、ゲームのプログラムのメソッドとして普通に並べるのか、クラスにまとめるのか、と考えて、クラスを選びました。

そして、静的（クラスメソッド）で良いと思ったので各メソッドは static にしていましたが、各メソッドでゲーム本体（app）を参照する必要が出てきたので static を外して、new Effectz( app ) とするようにしました。

※static にして TestClass.method() の形で呼ぶメソッドは「クラスメソッド」と呼んで良いんだっけ…と思ってWEB検索して確認したりしました。私もスラスラと上記のようなプログラムの話を書いているようで、実はそんなにできるわけではないです。

単なる関数の配列だと、それがちゃんと動くのかどうか不安になったとき、本番プログラムの中でテストをしなければならなくなり、それが難しさにつながりそうだと思いました。ゲームプログラムのメソッドとして普通に並べるというのも同じです。取り回しが悪いと言うのかなぁ。そうやって組み込んでしまうと身動きが取れないかんじがします。

別のクラスにすれば、テスト用のプログラムを組んでそのまま試すことができると思います。

（訪問者のどんなニーズと この記事がつながるか）

• 面白いものを観たい
• ゲームの豪華な「エフェクト」ってどうやって実現するの？（その一例）
• 日記を読みたい

2021/8/22（日）

PC-9801 UV2、21、11 本体を

古いパソコン（レトロPC）の PC-9801 UV を買おうか買うまいか悩んでいます。

← PC-9801 UV21

価格は、

• PC-9801 UV2　オークションにて 11,800円
• PC-9801 UV2、21、11　通販サイトにて 89,800円

なぜほしいのか（アウトライン式にまとめ）

※太字は一般的に評価に値すると思われる事柄

◎ 98ハードの本を買って、、

• すごい勢いで読んだ。
  （だから何か自分の中にあるんじゃないか）
• 昔から望んでいたアセンブラによる VRAM（グラフィック画面専用メモリ）アクセスをやりたい。
• マイコン操作に対する熟知につながる。
• いろいろ試して遊べる。

◎ 前々から気になっていた。

私は中学三年生のころに PC-9801 RX21 を私のわがままで父に買ってもらいましたが、そのことについて今現在後悔していて、その後悔について取り返したいと思っています。

”本来あるべきものがこれだった” という思いで UV を ながめていたい。

※どういうことかというと、当時 PC-9801 を買うときに、父のすすめでは、父の会社の生協の UV21/11 だったが、私は「それでは性能がダメだ」と言って、「RX21 が良い」と、ずっと高価なものを望んで、買わせてしまった。

それが今思えば、高価すぎで、わがままだった。「特別な情報系の学校に進学するので、、」という投資の意味も、父にはあったと思うけど。。

当時の私にはわかりませんでしたが、UV21/11 という機種は、

• FM音源が最初から付いている
• 機種表記の「/11」は UV21 の省スペースタイプ UV11 のこと
• CPU が 286 以前の V30 であること以外は、メモリ 640KB など RX21 に近い性能。
• N88-BASIC をフロッピーディスクではなく、ROMに内蔵している。（おそらく起動が速い）
  ↑この情報は間違えていました。内蔵しているのは、N88-BASIC 本体ではなく、”N88-BASIC が利用する BIOS のインタプリタルーチン” でした。

というように、良いところがあります。なので、父のすすめを聞いたほうが、いろいろ良かったと思います。

ちなみに私が目をつけているオークションの品物は、UV21 ではなく 性能の低い UV2 ですが、ちょっと性能が低いくらいならいいかなと思っています。

今ここで UV を購入すると どんなマイナスがあるか（アウトライン式にまとめ）

× 荷物になる

本体だけではなく、周辺機器、本もある

× 出費になる

後から周辺機器を購入する

後から本を購入する

× 非生産的活動による不健康（生産的活動による不健康なら いいわけが立つけど）

古いパソコンについて活動することは、現在の世の中（一般的なところ）のニーズではない。

（一部のおたくっぽいホビーではニーズが高いけど）

× オークションで買った場合、粗大ごみになる確率がやや高め

オークションの、私がこれだと思っている出品内容を見ると、ちゃんと使えるように整備したと書かれていて、一見良さそうに思えるんだけど、ほかのプロでやっている通販サイトの品物と比べてみると、やはり、どこまで大丈夫なのかが不透明で、ちょっと「賭け」みたいなところがある。

しかもその出品内容をよく見ると疑問点が２つ

1. PC-9801 UV2 はメインメモリ 384KB だが、その出品の写真（BASIC起動画面の～bytes freeの表示）には 640KB と映っている。
   メモリ増設済みの説明があればいいが、その説明もないので、正体がわからない。
   2021年8月23日　追記：後からわかりましたが、出品の本体内マザーボードの写真を見ると増設 RAM が付いていました。出品者も多分知らないんじゃないかと思います。
2. 過去のお客さんとのやり取り（の記録）がむごい。

そのため、この出品は利用できません。

2021年8月23日　追記：RAM 640KB の正体がわかったので、また買おうかと迷い始めました…

買うことのプラス面とマイナス面の両極に、いちじるしく分かれているから悩むんです。

買う場合は、マイナス面を見越して買うことになります。

そんなことをこの1週間ぐらい考えていました。

今現在は買わない方向に傾いています。。頼みの綱（読み：つな）のオークションの出品内容がダメなので。

2021年8月23日　追記：RAM 640KB の正体がわかったので、また買おうかと迷い始めました…

（訪問者のどんなニーズと この記事がつながるか）

• 日記を読みたい

2021/8/17（火）

全体的・基本・簡潔のRPG -[RPG,javascript]

私が趣味で作成している「RPG の試作品」を紹介します。

このお盆休みで、ずっと取り組んでいました。

画像リンクをクリックすると、新しいウィンドウで JavaScript を実行します。
　　2023年5月7日追記：長い間動作不良を起こしていましたが、今日気づいて直しました。

• キーボードが必要です。タッチデバイスには対応していません。
  ↑↓←→　：　上下左右に移動
  
  スペースキー　：　決定
  
  B　：　キャンセル、前のメニューに戻る
• 最初の「hit any key」の画面で何かキーを押すと、BGM が鳴りますので、ご注意ください。
• ある程度、CPU パワーを使うのでそのつもりで…。
• 試作品なので、できないことはいくつかあります。
  たとえば、コマンドメニューを開いて正常に動作するのは、「キャラ1」の「なんこう」と「ひほう」だけです。それ以外のどうぐやまほうを選んだりすると、正常に動作しません。
• それから登場するモンスターは「モモスラ」だけです。
• 以前公開したものは Google Chrome で画面描画が乱れていたようですが、以前のものも今回のものも修正してあります。

プログラムリスト（2640行）

著作権はフリーです。プログラムリストの一部の内容をコピーしたり、または全体をコピーして使ってもらっても大丈夫です。

（試作品なので、ほとんど使い物にはならないとは思いますが…）

お手元で動かすためのファイル一式（RPG_20210817.zip [11.9MB] ）

※ファイル一式をダウンロードして、解凍したら、simple.html をダブルクリックしてください。インターネットブラウザで RPG が動くはずです。

コメント

全体的、基本、簡潔、と言っても、現状、複雑になっています。

全国の小中高生で「RPG を自分でプログラムしたいけど、ちょっとやり方がわからない、難しい」という人のために、参考になるようなプログラムを目指しています。そのためには現状難しいところをもっと簡潔にしていく必要があります。それが私の課題です。

また、「自分で考えて作るほうが何倍も楽しい！」というのが人の気持ちの基本だと思うので、私の課題の「見本を示す」というのは、一歩間違えば、相反する内容になります。自分で考えたいところを「これだよ」と言ってしまうので。。その辺をどう調整していくかも、大きな課題です。（最低限の骨組みを示すだけに とどめればいいのかな…）

どうしてスライムがコレ　　なのか。

自作 RPG が自然とドラクエに似てしまう問題があるんです。

すでにけっこう…、というかほとんどクリソツ、ドラクエそのものです。

そのままだと、「パクリ」だって叩かれてしまいます。

…最近、集英社のこういう本　　を買いました。

「少年ジャンプがどうしても伝えたい、マンガの描き方」（集英社刊、900円）

最近コンビニの本コーナーに並んでいたと思います。

私は漫画家になりたいとは思っていませんが、RPG 開発やホームページ編集をするうえで、いろいろ参考になりそうなことが書いてあると思ってこの本を買いました。

で、さっそく自分自身のパクリの問題の解決策をこの本からいくつか見つけました。

• ”何かの影響を受けた作品はすぐに『パクリ』だって叩かれませんか？”（同書P31）
• ”オリジナリティってどうやって見つけたらいいですか？”（同書P32）
• ”自分の漫画が既存の作品のパクリと言われないか不安です。”（同書P128）

そこに書かれていたことで、「影響元が一つだから気になってしまうんです。たくさん取り入れたらオリジナルになりますよ」とありました。

たしかに私の RPG の影響元は「ドラクエ」１つで、だからこそ似てしまって気になってしまうってことですね。

ドラクエ以外に好きなものはないのか？と思って挙げてみたら、

• MSX2版 ハイドライド３
• MSX版 グラディウス２（これは RPG ではなくシューティングですがだいぶ好んで遊んでいました）

が出てきました。でもすぐにこの２つから影響を 意図的に出すのは難しいので、、

とりあえず、このスライム（左）をなんとかしようと思いました。

→ → →

水色のプニプニ物体はだいたいドラクエのスライムを連想させるので、色を変えることにしました。

青　→　ドラクエのスライムだ

赤　→　ドラクエのスライムベスだ

緑　→　緑色の透き通ったスライムはいくつかのゲームで登場していて、同じだと面白くない。

桃　→　桃色（ピンク）なら、雑魚キャラとしては珍しいんじゃないか、と思って、思い切ってピンクにしました。

この「モモスラ」は、新しいほうの「ぷよぷよ」に似てる！と気づきましたが、「ぷよぷよ」のほうは口がありません。だからセーフ。（上の図で口をなくすとぷよぷよになっちゃいます）

このデザインのスライム は他の何かのゲームですでに登場しているかもしれませんが、私はとりあえずそれを知らないので、この「モモスラ」で行こうと思います。

ちなみにコマンドウィンドウの下地が「白」なのも、ドラクエとの差別化のためです。

影響元に似ることについては、「別のものを混ぜて ぼやかす努力が必要」なんじゃないかなと思います。

（訪問者のどんなニーズと この記事がつながるか）

• 試作でもいいから RPG でちょっと遊びたい
• 個人の RPG 開発について読みたい
• 日記を読みたい

2021/8/10（火）

「PC-9801 ライブラリ」というキーワードでWEB検索して…

昔の趣味の再燃だ☆

前々から個人的に PC-9801 というハードウェア（1980年頃のパソコン）について、高校生の頃によくプログラミングしていた経験があるせいか、気になっていました。

（PC-9801 リンクは Wikipedia）

今日も何気なく「PC-9801 ライブラリ」というキーワードで情報検索していました。

（「ライブラリ」とはC言語などのライブラリのことで、私の目的は画面に何かを描く「グラフィクス・ライブラリ」です。画面に高速に何かを描けると楽しいので。）

その情報検索でこんな本を見つけました。今から33年前に発売された古文書（こもんじょ）です。

「98ハードに強くなる本II」（1988年　技術評論社）

なぜか無料で全ページを読める状態になっていて、「著者が気を利かせて広く一般に公開しているのかな」と思って、喜んで読んでみました。

読み始めると、すごい勢いで読み進め、スポンジが水を吸収するように内容を吸収する自分を発見しました。

そんなに 98 の情報が欲しかったのか…。

でもちょっと躊躇します。

きっと、「PC-98エミュレーター」やフリーのアセンブラの「NASM」（リンクは Wikipedia）を使えば、私はこの先1年は遊んでいられると思います。

でも『今さら PC-9801 のハードウェアに詳しくなって何になるのか。。』という思いも当然あります。

なぜなら、国民機「PC-9801」の時代は 20 年以上前に終わっていて、今後新しい機種が出るはずもなく、企業の PC として採用されるわけはなく、使うと言ったら遊び（ホビー）で使うくらいでしょう。

98 について取り組んでも無駄に時間を過ごす気がします。

←当時、国民機と呼ばれていたパソコン PC-9801。（画像はホントはPC-88）

でも考えてみれば、意味はあります。

「PC-9801」という具体的な物として見るとあまり意味はないかもしれませんが、「コンピューター／ハードウェア」という大きなカテゴリとして見ると世の中にそのニーズはありそうです。

コンピューターや電子回路などハードウェアは今（昔もそうでしたが）、さかんに開発されていますよね。

ソフトウェアなどプログラミングの世界でもハードウェア的なことをある程度知っていたほうが、プログラミングの勘がさえることもあります。

それについて本から少し引用すると、、

• （BIOSは煩雑な手続きを簡略化する）
  「BIOSを利用することにより、各種ハードウェアの制御が簡単な手続きで実現できるようになります」
  私が思ったこと：　そうなのか！ BIOSって意外と使えるものなのか！　（現在の BIOS はまたちょっと違っているかもしれませんが）
• （I/Oポート）
  「PC-98 には,各LSIごとにI/O ポートという入出力制御用のポートが設けられていて, 各種インターフェースをはじめとする LSI を直接制御する際に重要な役割を果たします.」
  私が思ったこと：　I/O ポートは PIC マイコンとかでいつも使っているから知ってるぞ！
• （操作対象は単一ではなく、いろいろな LSI である）
  「実際にシステムからある機能を引き出すときには, 各LSI が複雑に関連してきます.PC-98 では, これらLSI を効率的に制御するために各LSI に固有のBIOS(基本人出力ルーチン) が用意されており, プログラム作成の上で非常に有用です.」
  私が思ったこと：　そうか LSI 同士が複雑に関連していることを意識したほうが良いんだな！
• （BIOSは仕様の変更を吸収する（カプセル化））
  「～I/O を直接アクセスしてしまうと, 将来ハードウェアの変更があった場合に, そのプログラムは正常に動作しなくなってしまうからです. しかし,BIOS を利用していれば,ROM 内のBIOSはハードウェアに対応しているため, ハードウェアの違いはBIOS によって吸収させることができます.」
  私が思ったこと：　オブジェクト指向のカプセル化みたいだ。

と、まぁ、こんな感じで、今の時代のコンピューター／ハードウェアに通じる知識を学べそうです。

←家電に組み込まれたコンピューターについて BIOS とか LSI の知識を使う…かな？

ところで、上記の、

「なぜか無料で全ページを読める状態になっていて…」

となっていたことについて調べたところ、

著者が自分の意志で公開しているというものではなく、ある組織か 人物かが、出版社に無断で公開しているというもので、しっかり問題になっていました。

キーワード「archive.org 著作権」を Bing で検索

いろいろなところでニュース記事になっています。

この行為は営利目的ではないので「海賊版」にはあたらないそうです。これを行っている本人は、

「コロナウイルスで図書館が使えないので、人々のために代わりの図書館をネットワーク上に開設した。図書館と同じだ」

と主張しているそうですが、普通に考えて無茶だなと思います。

図書館は税金とかで運営されているんじゃなかったっけ、、、税金を払っている人たちが無料で借りているという形（無料に見えて実はお金を払っている）なんだよなぁ、、

図書館は公共の施設として認知されているから、出版社も「その場所に数冊置くくらいだったら利益に問題は出ない」と考えてその上で「無料で OK」としているんじゃないかな。

だから、公共として認知されていない組織がネットワークを使って本を無料で読める状態にしてしまうと、出版社たちが YES と言うわけはないでしょう。

…そんなわけで、せっかくの本はネットワーク上では読む気になれず、通販で探しました。

アマゾンでは中古で 5000円。高めで難しい。　楽天には無し。

その他の通販を探して、中古を 980 円で購入できました。安くて良かった。

本が届いたら始めるんだろうか……98を…？

　９８を～～～～！

8月12日(木)に通販が届きました。

ほしいなと思ってから（九州の長崎のお店から茨城まで）わずか2日で届くなんてすごいな。

自分はそこまで してもらうほど偉くはないって思ってしまう。

（訪問者のどんなニーズと この記事がつながるか）

• コンピューター（パソコン本体）の話を聞きたい
• 日記を読みたい

2021/8/7（土）

全体的・基本・簡潔のRPG -[RPG,javascript]

コマンド入力システムはだいたいできあがり、現在は戦闘システムを作っています。

プログラムの内容を基本的、簡潔にしぼり、プログラミングする内容はシンプルになると思いきや、あれこれいろいろと作る必要があることに気づき、RPG ってそう簡単に作れるものではないんだなと痛感しています。

厳しい中でこそ何かが生まれる ▼30代、40代、50代の方々はこのような どこか くどいストーリー展開は必要としないかも？ 面白いならいいけど、はんぱ な物語なら いらない。 提出した物語10個を上司（編集者）が10個ともボツにするような中で――― （たとえば鳥山明氏にとっての鳥嶋氏のエピソード。 リンク先は Wikipedia の「鳥山明」ページの小題「デビューまでの経緯」です） ――10個ともボツにするような中でくぐり抜けてきた物語をプレイヤーたちは面白いと言う。 それが本当だとすれば、私にはそういう上司がいないから、 私が作る物語はプレイヤーたちにとっては、つまらないもの と言ってよいでしょう。 でも誰でも「自分の物語を描いてみたい」と挑戦したいところもあると思います。 そういう気持ちは人の気持ちについても自分の気持ちについても大切にしたいと思います。

制作のガイド2点 ▼プレイヤーはゲームソフトに対し 5000 円を支払っている。 そこを考えながら作ると、少し変わってくる。 「5000円を支払っている」というのは 昔のファミコンソフトの価格相場をもとにしています。 「プレイヤーはこれを5000円で買う」と思うと、急にどこを調整したほうが良い、という思いがわいて、チープなゲームソフトは説得力のあるゲームソフトへ修正されていきます。あなたが何か、人向けに作っているなら、試しにそう考えてみてはどうでしょうか。（ガイド１） なお、上図のモンスターはこちらを不敵に にらむよう心掛けました。 そうすることでプレイヤーたちのやる気をくすぐるのではと思います。（ガイド２）

そのプログラムのどこが基本的で、どこがマイナーなのか

どこまでが基本的、簡潔で、どこからが基本的、簡潔を超える部分（マイナー）なのかを判断するのも難しいです。

RPG の基本的なプログラムを示したいので、マイナーな記述（一般的ではないプログラム）は避けなければなりません。

そうかと言って、基本的、簡潔をめざしすぎて、あまりカッコ良くない残念なシステムを作ってもつまらないでしょう。（上図で言うと散切り頭のこと）

たとえば、戦闘システムでは、モンスターが無作為にキャラを選んでただ攻撃してくるというだけでは、変化がなくてつまらないです。

そうではなく、モンスターたちが一人の弱そうなプレイヤーキャラクター、一人のキーパーソンのプレイヤーキャラクターに対し、集中攻撃をしてくるとか、モンスターたちが自分たちを適切に回復するとか、そういう複雑な動きをすれば、戦略を練る必要が出てきて、それが一進一退の攻防になり、ゲームとしての面白さにつながります。

上の私の自作 RPG のスクリーンショット2点は２つとも、今どきのゲームに比べればずいぶんと残念な様子に見えると思いますが、プログラムのほうは基本的、簡潔にしつつも拡張性のある（今どきのゲームに通じる華やかな演出が可能な）プログラムを心掛けているので、たぶん、大丈夫です。

※RPG の基本的なプログラムは問題にしていなくて、１つの作品を作りたいということならこの話はあまり関係がありません。

そのゲームソフトはどの世代をターゲットにするのか

たぶん、30代、40代、50代の方々は、見た目の華やかさよりも、「内容は本当に面白いのか」という部分を見ると思います。

たとえば、ファミコン版ドラクエ３のバラモス城のエビルマージ4人組は緑色の覆面の適当な姿のやつらですが、倒すか倒されるかの瀬戸際になるので内容的に面白いです。

それに対して、10代、20代の方々は、「見た目がダメなら、ダメで面白くない」と言うんじゃないかなぁと思います。（私の偏見ですかね？）

強敵のエビルマージ4人組↓今の時代に若者向けにこの画面でゲームを提供するとは考えにくい。

※この画像は私が描きましたがある程度くずして描いていて、2次創作みたいなものであり、目的は引用です。うーん、苦しい
　　苦しいので、後からナナメのクロオビを入れてみました。これなら著作権に抵触しないかな？

ガンダムにしても、ファーストガンダムで多大な喜びを味わった30代、40代、50代は「RX-78 ガンダム」のあのシンプルなデザインが「良い」と言いますが、今どきの10代、20代の若者たちは、それよりも「フリーダムガンダム」とか「ダブルオー・クアンタ」など、イケイケなガンダムを好んでいるようです。

世代ごとに何が面白いのかという価値観が異なっていて、30代、40代、50代が面白いと思っているものは、かならずしも若者が面白いと思うとは限らないと思います。

もうちょっと上の世代を見ると、60代、70代、80代の方々が体験した「チャンバラ」や「野山を駆け回って遊ぶ」という遊びは、30代、40代、50代の方々にとっては

「わかるけど、どちらかというと　ファミコン　のほうが面白いよ」

と言うと思います。私も当時はファミコンに夢中でしたから。最初に何を味わってきたのか、が価値観の違いに大きく影響するのではと思います。

そして、今どきの10代、20代の方々は、私の自作の RPG やエビルマージ4人組の画面を見て

「わかるけど、どちらかというと　見た目が華やかで派手　なほうが面白いよ」

と言うのではないでしょうか。魅力的な女の子がいっぱい出てきて華やかで、超豪華な画面エフェクトの数々に夢中なのでは？？生まれたときに周りにそういうゲームがあふれていたと思います。

世代交代で同じことを繰り返していて（歴史は繰り返す）、それぞれで異なる価値観を持っています。

ゲーム開発のターゲットは現状、2世代（10代、20代の方々と、30代、40代、50代の方々がゲームで遊ぶ状態）であり、華やかなだけではダメだし（30代、40代、50代がNo）、単に内容が面白いというだけでもダメ（若者がNo）なので、私が重視している「内容の面白さ」（30代、40代、50代向け）のほかに、華やかな演出の道（10代、20代向け）も確保しつつプログラムすることにしています。そういう意味でも基本的、簡潔を目指すだけではなく、ある程度拡張性を準備する必要があります。

また、余談ですが、登場する女の子についても私は「戦いなのだから全員ズボン着用だ！そこに魅力がある！」なんて現代の若者たちの趣味から外れたことを考えていますが、それもほどほどが良いのかもしれません。

ブルマ「ちょっとぐらいなら触ってもいいのよ」　（ほどほどにして露出しましょう）

悟空「オラ、きたねぇケツなんか触りたくねぇ」　（いや、戦いなんだから全員ズボン着用だ！）

コロナウイルス私の状況

7/28（金）の夕方に勤め先企業の計画で1回目のワクチン接種を受けました。（職域接種）

接種会場は待ち行列になっていて40分ほど待ち、接種を受けた後、15分待機させられました。

特に症状が出なかったので、そのまま帰宅しました。

翌日土曜日に、接種した部位の左肩が打撲したみたいに痛みはじめ、風邪みたいな身体の具合の悪さと、咳がありました。

日曜日が症状のピークでしたが、午後くらいから下り坂になっているのを感じました。

ただし、休み明けの月曜日～木曜日まで、ずっと咳が続いていました。

今も咳が軽く残っています。

職場の他の方々も、ある人は肩が上がらない、ある人は職場に来たけど具合が悪い、ある人は38.5℃、ある人は39℃以上の高熱で休み、ある人は様子見で接種せず、という感じでした。

2回目の接種は8/27を予定しています。

私が接種したのはモデルナのワクチンで、ニュースによると、3回目の接種が必要とか言っていますね。

今現在、日本全国では感染者数の最高記録を更新中ですよね。東京都で1日5000人以上、全国で1日1万5000人以上。

そのため、今日予定していた歯医者の受診はキャンセルしておきました。（私は茨城県ですが、茨城県も最高記録更新中）

どこかに出かけるときは目的を単一にしぼって、「ついでに」という行動は取らないようにしています。

目的を複数にするとそれだけ感染のリスクは高まるし、感染した際にどこで感染したのか追うことも難しくなると思って。

私は一人暮らしで、友達が少なく、飲食に誘われることはほとんどないので、冷たく断る／用心しながら誘いに乗る、というようなことはなく、これを読んでいる皆さんとは立場が少し異なるのかなと思います。

（訪問者のどんなニーズと この記事がつながるか）

• 管理人のコロナウイルスの状況は？
• 日記を読みたい

---

以降は自己啓発的な内容です。

部屋に閉じこもらずに、散歩に行く取り組み：

右端の写真は散歩中に撮影した写真です。でも面白い写真ではありません。

4連休のさんぽ：

7月22日(木)	良いと思った☆	しげみ から のぞく海
7月23日(金)	良いと思った☆	くもりの砂浜
7月24日(土)	良いと思った☆	はれの砂浜
7月25日(日)	良いと思った☆	はれの砂浜２

お盆休みのさんぽ：

8月6日(金)	仕事疲れで動けなかった☆	×
8月7日(土)	なんかページの編集に取りつかれて、抜け出せないと思いつつ夕方になってしまった☆	×
8月8日(日)	良いと思った☆	写真なし
8月9日(月)	良いと思った☆	くもりの砂浜２
8月10日(火)	良いと思った☆	空のグラデーション
8月11日(水)	良いと思った☆	いつも砂浜を撮影している ハラッパラッパー（原っぱ）
8月12日(木)	良いと思った☆	きのねっこぶぶん
8月13日(金)	良いと思った☆	あめ
8月14日(土)	良いと思った☆	おもしろくない写真（雨天の海）
8月15日(日)	（すでに完ぺきじゃないけど）欠かさず行くよりは たまには外したほうが良いと思って、散歩には行かなかった。	なし
8月16日(月)	良いと思った☆ けど、昨晩の徹夜がこたえた…	おもしろくない写真（雨天の海）

表の星々の装飾は CSS を使いました。昔（３０年前）同じような装飾を何かで（Pascal 言語で）行っていたら、女の子から「どうやるの？」と聞かれたことがあります。

だからこの星々の装飾についても女の子の目にとまり、どうやるのか知りたがるんじゃないかなぁと思います。

昔（３０年前）は、一言では説明できない内容（画像のビットを XOR や AND など論理演算で合成するという内容）だったので説明できませんでしたが、今回の星々も、一言では説明できません。

（私は女の子とペラペラとしゃべれる人ではないのでそういう意味でも説明できません）

CSS の内容はこれです（リンクはスクリーンショット画像です）

この画像中の CSS の .decoTable というクラスを <table class="decoTable"> のように表のタグに指定するとその表は星々の画像で飾られます。

上記の「これ」のリンクは画像で不親切だし、上行の一言があってもわからないと思うので、サンプルを作りました → stars.zip　（クリックするとダウンロード）

（Windows の場合ですが）この zip ファイルをダウンロードしたら右クリックして「すべて展開...」して、中身の stars.html をダブルクリックすれば、自分のパソコンで星々の表を表示できます。

stars.html を右クリックして、「プログラムから開く」＞「メモ帳」とすれば、内容を表示して編集できます。

内容について詳しく説明はできませんが、stars.html 中の、

.decoTable td {..} と書いている部分は主に背景画像の これについて設定していて、

.decoTable ... td:after {..} と書いている部分は星々画像 について設定しています。

難しいところがいくつかあって、そのうちの１つは、

『.decoTable ... td:after {..} の position を absolute にしたとき、その上位の td タグの position を relative にすれば、.decoTable ... td:after {..} の位置の基準（原点0,0）は td となる』

というようなことをやっていて、これは CSS について勉強しないと理解は難しいです。

他に難しいのは、

• tr:nth-child(odd) や tr:nth-child(even)　と書いているところ　（ページの中の部分を選ぶ方法の１つ）
• z-index　（ページの中の重なっているものの重なり順を決めるもの）

かな？

難しいですが、がんばりすぎると身体を壊すのでほどほどに…。